
/**
 * Created by lixinkun on 2017/7/8.
 */
import React, {Component } from 'react';
import {
    Text,
    View,
    TouchableHighlight,
    ActivityIndicator,
    ListView,
    StyleSheet,
} from 'react-native';

import NavigationBar from '../../components/NavigationBar';
import {bindActionCreators} from 'redux';
import theme from '../../constants/theme';
import {connect} from 'react-redux';
import * as Actions from '../../actions/requestCityData';
import px2dp from '../../utils/px2dp';
import BackPageComponent from '../../components/BackPageComponent';
import AreaList from './AreaList';

class CityList extends BackPageComponent {

    constructor(props){
        super(props);
        this.ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 != r2});
    }

    render(){
        const spinner = this.props.loading ? (
            <ActivityIndicator
                style = {styles.loading}
                hidden = 'true'
                size = 'large'/>
        ) : (
            <View/>
        );
        return (
            <View style={[styles.container, {backgroundColor : this.props.pageBackgroundColor}]}>
                <View style={styles.toolbar}>
                    <NavigationBar title={this.props.provinceName}
                                   isBtnOnLeft={true}
                                   leftBtnIcon='arrow-back'
                                   leftBtnPress={this._handleBack.bind(this)}
                    />
                </View>

                {spinner}
                <View style={styles.contentContainer}>
                    <ListView
                        enableEmptySections={true}
                        dataSource={this.ds.cloneWithRows(this.props.dataSource)}
                        renderRow={this._renderRow.bind(this)}
                    />
                </View>

            </View>
        );
    }

    _renderRow(rowData, sectionID, rowID) {
        return(
            <TouchableHighlight
                onPress={()=> this._rowPressed(rowData, sectionID, rowID)}
                underlayColor='#dddddd'>
                <View>
                    <View style={styles.rowContainer}>
                        <View style={styles.textContainer}>
                            <Text style={[styles.id, {color: this.props.mainThemeColor}]}>
                                {rowData.id}
                            </Text>
                            <Text style={styles.title}>
                                {rowData.name}
                            </Text>
                        </View>
                    </View>
                    <View style={styles.separator}/>
                </View>
            </TouchableHighlight>
        );
    }

    _rowPressed(rowData, sectionID, rowID) {
        const { navigator } = this.props;
        if(navigator) {
            navigator.push({
                name: AreaList + '',
                component: AreaList,
                args: {
                    rowData: rowData,
                    sectionID: sectionID,
                    rowID: rowID,
                    cityName:rowData.name,
                    cityId: rowData.id,
                    provinceId: this.props.provinceId,
                    url: this.URL,
                },

            });
        }

    }



    componentDidMount() {
        this.props.actions.fetchCityList(this.props.provinceId);
    }


}

const styles = StyleSheet.create({
    textContainer: {
        flex: 1,
        flexDirection: 'row',
        alignItems: 'center',
    },
    container: {
        flex: 1,
        paddingTop: theme.toolbar.paddingTop,
    },
    loading: {
        flex: 10,

    },
    separator: {
        height: 1,
        backgroundColor: "#dddddd",
    },
    id: {
        paddingLeft: px2dp(8),
        fontSize: 25,
        fontWeight: 'bold',
    },
    title: {
        fontSize: 20,
        marginLeft: px2dp(20),
        alignItems: 'center',
    },
    rowContainer: {
        flexDirection: 'row',
        padding: 10,
    },
    toolbar: {
        position: 'absolute',
        width: theme.screenWidth,
        marginTop: theme.toolbar.paddingTop,
        zIndex: 1
    },
    contentContainer: {
        marginTop: theme.toolbar.height,
        flex: 1,
        zIndex: 0
    },

});

const mapStateToProps = (state) => {
    return {
        loading: state.cityDataState.loading,
        dataSource: state.cityDataState.dataSource,
        error: state.cityDataState.error,
        mainThemeColor: state.settingState.colorScheme.mainThemeColor,
        pageBackgroundColor: state.settingState.colorScheme.pageBackgroundColor,
    };
}

const mapDispatchToProps = (dispatch) => {
    return {
        actions: bindActionCreators(Actions, dispatch),
    };
};

export default connect(mapStateToProps, mapDispatchToProps)(CityList);

